<!--
    computed - 计算属性
 -->
<script setup>
import {computed, ref} from "vue";

// 声明数据
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);
// 计算属性，从 list 中过滤出大于 2 的
const computedList = computed({
    get: () => {
        return list.value.filter(item => item > 2)
    },
    set: (newValue) => {
        console.log(newValue)
        list.value = newValue
    }
});
// 计算属性支持修改
computedList.value = [888, 888]
// 修改数组
const addFn = () => {
    list.value.push(666)
}
</script>

<template>
    <h3 style="text-align: center;">Vue3-Study</h3>
    <hr>
    <div>原始数据：{{ list }}</div>
    <div>计算后的数据：{{ computedList }}</div>
    <button @click="addFn">修改</button>
</template>